<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录-注册</title>
    <!-- 导入Bootstrap的css文件 -->
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    <!-- 导入图标字体文件 -->
    <link rel="stylesheet" href="../static/font-awesome-4.7.0/css/font-awesome.min.css">
    <!-- 导入登录-注册的样式文件 -->
    <link rel="stylesheet" href="../static/css/sign-in-up.css">
    <!-- 导入浏览器ico图标 -->
    <link rel="shortcut icon" href="../static/images/cup.ico">
</head>

<body>
    <!-- 具体样式 -->
    <div class="section dwo">
        <div class="container">
            <div class="row full-height justify-content-center">
                <div class="col-12 text-center align-self-center py-5">
                    <div class="section pb-5 pt-5 pt-sm-2 text-center">
                        <input class="checkbox" type="checkbox" id="reg-log" name="reg-log">
                        <div class="card-3d-wrap mx-auto">
                            <div class="card-3d-wrapper bgk">
                                <div class="card-front">
                                    <div class="center-wrap">
                                        <div class="section text-center">
                                            <h4 class="mb-4 pb-3">登录</h4>
                                            <!-- 登录区样式 -->
                                            <form id="loginForm" action="/loginDone" method="POST">
                                                <div class="form-group">
                                                    <input type="text" name="inputUsername" class="form-style"
                                                        placeholder="请输入用户名" id="inputUsername" autocomplete="off">
                                                    <i class="fa fa-user-circle-o" aria-hidden="true"></i>
                                                </div>
                                                <div class="form-group mt-2">
                                                    <input type="password" name="inputPassword" class="form-style"
                                                        placeholder="请输入密码" id="inputPassword" autocomplete="off">
                                                    <i class="fa fa-unlock-alt" aria-hidden="true"></i>
                                                </div>
                                                <a href="javascript:" class="btn mt-4" onclick="login()">登录</a>
                                            </form>
                                            <div class="d-flex justify-content-between mt-4 text-left">
                                                <div class="flex-fill">
                                                    <p>没有帐号？<label for="reg-log">立即注册</p>
                                                </div>
                                                <div class="flex-fill text-right">
                                                    <p><a href="http://www.hyr6.work/" class="forgot link">忘记密码？</a></p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-back">
                                    <div class="center-wrap">
                                        <div class="section text-center">
                                            <h4 class="mb-4 pb-3">注册</h4>
                                            <!-- 注册区样式 -->
                                            <form id="registerForm" action="/registerDone" method="POST">
                                                <div class="form-group">
                                                    <input type="text" name="registerUsername" class="form-style"
                                                        placeholder="请输入用户名" id="registerUsername" autocomplete="off">
                                                    <i class="fa fa-user-circle-o" aria-hidden="true"></i>
                                                </div>
                                                <div class="form-group mt-2">
                                                    <input type="password" name="registerPassword" class="form-style"
                                                        placeholder="请输入密码" id="registerPassword" autocomplete="off">
                                                    <i class="fa fa-unlock-alt" aria-hidden="true"></i>
                                                </div>
                                                <div class="form-group mt-2">
                                                    <input type="password" name="registerRePassword" class="form-style"
                                                        placeholder="请再次输入密码" id="registerRePassword"
                                                        autocomplete="off">
                                                    <i class="fa fa-unlock-alt" aria-hidden="true"></i>
                                                </div>
                                                <a href="javascript:" class="btn mt-4" onclick="register()">注册</a>
                                            </form>
                                            <p class="mb-0 mt-4 text-center">已有帐号？<label for="reg-log">立即登录</label>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 导入jQuery -->
    <script src="../static/js/jquery-3.6.0.min.js"></script>
    <!-- 导入Bootstrap的js文件 -->
    <script src="../static/js/bootstrap.min.js"></script>
    <!-- 导入axios -->
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>

    <!-- 逻辑处理 -->
    <script>
        // 登录
        function login() {
            // 获取登录时输入的用户名
            let username = $('#inputUsername').val();
            // 获取登录时输入的密码
            let password = $('#inputPassword').val();
            // 登录判断
            if (username === '') {
                alert('用户名不能为空！');
            } else if (password === '') {
                alert('密码不能为空！');
            } else {
                // 获取登录表单信息
                axios({
                    method: 'post',
                    url: '/loginDone',
                    data: $('#loginForm').serialize()
                }).then(function (res) {
                    // 存放返回的数据
                    res = res.data;
                    // 验证成功
                    if (res.code === 200) {
                        // 跳转主页面
                        window.location.href = '/';
                    } else {
                        // 验证失败，弹出提示信息
                        alert(res.msg);
                    }
                }).catch((err) => {
                    // 捕获到异常
                    alert(`ERROR!错误信息如下：${err}`);
                });
            }
        }

        // 注册
        function register() {
            // 获取注册时输入的用户名
            let username = $('#registerUsername').val();
            // 获取注册时输入的密码
            let password = $('#registerPassword').val();
            // 获取注册时再次输入的密码
            let rePassword = $('#registerRePassword').val();
            // 登录判断
            if (username === '') {
                alert('用户名不能为空！');
            } else if (password === '') {
                alert('密码不能为空！');
            } else if (rePassword === '') {
                alert('确认密码不能为空')
            } else if (password !== rePassword) {
                alert('两次密码不一致！');
            } else {
                // 获取注册表单数据
                axios({
                    method: 'post',
                    url: '/registerDone',
                    data: $('#registerForm').serialize()
                }).then(function (res) {
                    // 在axios工具下，服务器返回的数据在返回数据的data中
                    res = res.data;
                    if (res.code === 200) {
                        // alert(res.msg);
                        window.location.href = '/login';
                    } else {
                        alert(res.msg);
                    }
                }).catch((err) => {
                    alert(`ERROR!错误信息如下：${err}`);
                });
            }
        }
    </script>
</body>

</html>